<template>
    <div class="changeCity">
        <el-row class="change-city">
            <!-- 选择 -->
            <el-row class="selectCity borderBottom">
                <span>按省份选择：</span>
                <el-select id="province" v-model="province" placeholder="省份" @change="selectProvince">
                    <el-option-group v-for="group in provinceOptions" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.options" :key="item.provinceCode" :label="item.provinceName" :value="item.cityInfoList" class="group"> </el-option>
                    </el-option-group>
                </el-select>
                <el-select v-model="city" :disabled="isDisabled" placeholder="城市" @change="selectCity">
                    <el-option-group v-for="group in cityOptions" :key="group.label" :label="group.label">
                        <el-option v-for="item in group.options" :key="item.id" :label="item.name" :value="item.name"> </el-option>
                    </el-option-group>
                </el-select>
                <span class="search">直接搜索 :</span>

                <el-select class="search" v-model="searchValue" filterable placeholder="请输入城市中文或者拼音" @change="inputSearch">
                    <el-option v-for="city in cityAllArr" :key="city.id" :label="city.name" :value="city.name"> </el-option>
                </el-select>
            </el-row>

            <!-- 热门城市 -->
            <el-row class="hot-city borderBottom">
                <dl>
                    <dt>热门城市：</dt>
                    <dd>
                        <a href="javascript:;" v-for="city in hotCityList" :key="city.id" @click="changeSelectCity(city)"> {{ city.name }}</a>
                    </dd>
                </dl>
            </el-row>

            <!-- 最近访问 -->
            <el-row class="nearest borderBottom">
                <dl>
                    <dt>最近访问：</dt>
                    <dd>
                        <a href="javascript:;" v-for="item in recentsCity" :key="item.id" @click="changeSelectCity(item)">{{ item.name }}</a>
                    </dd>
                </dl>
            </el-row>

            <!-- 首字母选择 -->
            <el-row class="initial-select">
                <dl class="initial-title">
                    <dt>按拼音首字母选择：</dt>
                    <dd>
                        <a :href="'#' + initial" v-for="(initial, index) in initialList" :key="index">{{ initial }}</a>
                    </dd>
                </dl>
                <div class="initial-children">
                    <dl :id="key" v-for="(value, key) in cityAll" :key="key">
                        <dt>{{ key }}</dt>
                        <dd>
                            <a class="child" href="javascript:;" v-for="(i, index) in value" :key="index" :class="{ active: i.mark }" @click="changeSelectCity(i)">{{ i.name }}</a>
                        </dd>
                    </dl>
                </div>
            </el-row>

            <!-- 城市区域 -->
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            province: '', //绑定省份
            city: '', //绑定城市
            inputValue: '', //直接搜索绑定
            provinceOptions: [
                {
                    label: '省份',
                    options: [
                        {
                            label: '1',
                            value: '2',
                        },
                    ],
                },
            ], // select选项框
            cityOptions: [
                {
                    label: '城市',
                    options: [],
                },
            ],
            isDisabled: true,
            hotCityList: [],
            recentsCity: [],
            initialList: 'ABCDEFGHJKLMNPQRSTWXYZ'.split(''),
            cityAll: {},
            cityAllArr: [],
            searchValue: '',
        }
    },
    created() {
        this.getProvinceData()
        this.loadingData()
    },

    methods: {
        loadingData() {
            this.$axios.all([this.$axios.get('/api/meituan/city/hot.json'), this.$axios.get('/api/meituan/city/recents.json')]).then(
                this.$axios.spread((hotCity, recentsCity) => {
                    if (hotCity.status == 'success') {
                        this.hotCityList = hotCity.data
                    }
                    if (recentsCity.status == 'success') {
                        this.recentsCity = recentsCity.data
                    }

                    // console.log(res)
                })
            )
        },
        async getProvinceData() {
            const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/city/province.json' })
            this.provinceOptions[0].options = res
            let temp = {}
            for (let i = 0; i < res.length; i++) {
                var len = res[i].cityInfoList.length
                for (let j = 0; j < len; j++) {
                    let char = res[i].cityInfoList[j].firstChar
                    if (!temp[char]) {
                        temp[char] = []
                    } else {
                        temp[char].push(res[i].cityInfoList[j])
                    }
                }
            }
            this.initialList.forEach(item => {
                //城市字母排序
                this.cityAll[item] = temp[item]
                this.cityAllArr.push(...temp[item])
            })

            for (let prop in this.cityAll) {
                //城市排序
                this.cityAll[prop].sort((a, b) => {
                    this.hotCityList.forEach(item => {
                        if (item.name == a.name) {
                            a.mark = true
                        }
                    })
                    return a.id - b.id
                })
            }
            // this.cityAll.sort()
            console.log(this.cityAll, this.cityAllArr)
            // console.log(res);
        },
        async selectProvince() {
            if (this.province && this.province.length > 0) {
                this.cityOptions[0].options = this.province
                // const res = await this.$store.dispatch('getRequest', { path: '/api/meituan/city/hot.json' })
                // console.log(res, '城市')
                this.isDisabled = false
            } else {
                this.isDisabled = true
            }
        },
        selectCity() {
            //绑定
            if (this.city) {
                this.$store.commit('changeCity', { location: this.city })
                this.$router.push('/home')
            }
        },
        changeSelectCity(val) {
            //选择城市
            this.$store.commit('changeCity', { location: val.name })
            this.$router.push('/home')
            scrollTo(0, 0)
        },
        inputSearch() {
            this.$store.commit('changeCity', { location: this.searchValue })
            this.$router.push('/home')
        },
    },
}
</script>

<style lang="less" scoped>
@import '../util/public.less';
div.changeCity {
    width: 1180px;
    margin: 0 auto;

    .el-row.change-city {
        padding: 20px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 5px;
        dl {
            display: flex;
            margin: 0;

            dt {
                font-size: 16px;
                width: 100px;
                height: 80px;
                line-height: 80px;
                // box-sizing: border-box;
            }
            dd {
                margin: 0;
                // line-height: 80px;
                a {
                    padding: 0 20px 10px;
                }
            }
        }

        /deep/.el-row.selectCity {
            padding: 10px 0;
            height: 80px;
            span {
                margin-right: 15px;
                &.search {
                    margin-left: 40px;
                }
            }
            .el-select {
                width: 150px;
                margin-right: 15px;
                .el-input__inner {
                    width: 150px;
                }

                &.search {
                    width: 200px;
                    .el-input__inner {
                        width: 250px;
                    }
                  
                }
            }

            & > .el-input__inner {
                width: 240px !important;
            }
        }

        .el-row.hot-city {
            height: 80px;
            line-height: 80px;
            dl {
                display: flex;
                flex-shrink: 1;
                margin: 0;
            }
        }

        .el-row.nearest {
            & > dl > dd {
                line-height: 80px;
            }
        }

        .el-row.initial-select {
            dl.initial-title {
                display: flex;
                height: 80px;
                line-height: 80;
                & > dt {
                    width: 150px;
                    flex-shrink: 0;
                }
                & > dd {
                    display: flex;
                    width: 100%;
                    justify-content: space-around;
                    a {
                        text-align: center;
                        width: 34px;
                        height: 34px;
                        line-height: 34px;
                        margin: 23px 0;
                        padding: 0;
                        border-radius: 50%;
                        &:hover {
                            background: #eee;
                        }
                    }
                }
            }

            div.initial-children {
                dl {
                    padding: 20px 20px 10px;
                    border-radius: 10px;
                    display: flex;
                    &:hover {
                        background: #f8f8f8;
                    }
                    dt {
                        display: inline-block;
                        margin: 0;
                        background: @mt-bg;
                        height: 40px;
                        width: 40px;
                        margin-top: -10px;
                        text-align: center;
                        line-height: 40px;
                        border-radius: 50%;
                        flex-shrink: 0;
                    }
                    dd {
                        a {
                            display: inline-block;
                            padding: 0 20px 10px;
                            color: @mt-666 !important;
                            &:hover {
                                color: #000 !important;
                            }
                            &.child.active {
                                color: @mt-color !important;
                            }
                        }
                    }
                }
            }
        }
    }

    .borderBottom {
        border-bottom: 1px solid #eee !important;
        width: 100%;
    }
}
</style>
